<template>
  <section>
    <!-- 搜索筛选栏 -->
    <el-row type="flex">
      <!-- 下拉菜单：任务类型 -->
      <el-col class="mq-filter" style="width:160px;">
        <el-select placeholder="任务类型" size="mini" style="width:160px;" clearable
                   v-model="mission_types.current_key"
                   @change="MissionsTableFilterTypeChange">
          <el-option v-for="item in mission_types.data"
                     :key="item.key" :label="item.value" :value="item.key">
          </el-option>
        </el-select>
      </el-col>
      <!-- 输入框：任务信息 -->
      <el-col class="mq-filter" style="border-left: 1px solid #dcdfe6;">
        <el-input type="text" v-model="missions.filter.keyword" size="mini" clearable
                  prefix-icon="el-icon-search"
                  placeholder="任务编号 名称 描述 奖励 可解锁"
                  @input=MissionsTableFilterKeywordChange>
        </el-input>
      </el-col>
    </el-row>
    <!-- 任务数据表格 -->
    <el-row type="flex" justify="center">
      <el-col>
        <el-table size="small" :data="missions.data" :height="tableHeight"
                  :header-cell-style="{background:'#f4f7fa', color:'#909399'}"
                  :header-row-style="{height:'40px', fontSize:'14px'}"
                  :row-style="{whiteSpace: 'nowrap'}"
                  :cell-style="{whiteSpace: 'nowrap'}"
                  @sort-change="MissionsTableSortChange">
          <!-- No -->
          <el-table-column fixed sortable="custom" prop="no" label="No" width="80"></el-table-column>

          <!-- 任务类型 -->
          <el-table-column sortable="custom" prop="type" label="任务类型" width="150"></el-table-column>

          <!-- 任务名称 -->
          <el-table-column prop="title" label="任务名" width="120"></el-table-column>

          <!-- 任务需求 -->
          <el-table-column prop="requirement_desc" label="描述" width="150"></el-table-column>

          <!-- 任务奖励 -->
          <el-table-column prop="rewards_desc" label="任务奖励" width="150"
                           :show-overflow-tooltip="true"
          ></el-table-column>

          <!-- 可解锁 -->
          <el-table-column sortable="custom" prop="unlock" label="可解锁"></el-table-column>

          <!-- 大神建议 -->
          <el-table-column prop="hint" label="攻略提示"></el-table-column>
        </el-table>

        <el-row type="flex" style="height: 38px; padding-left: 18px;">
          <!--                        <el-col style="width: 70px;  line-height: 38px;">-->
          <!--                            <span style="font-size: 14px; color: #333;">分页</span>-->
          <!--                        </el-col>-->
          <el-col style="width: 150px;">
            <!--                            <el-dropdown type="button" :split-button="true"-->
            <!--                                         trigger="click" placement="top"-->
            <!--                            >-->
            <!--                              <span class="el-dropdown-link">-->
            <!--                                下拉菜单 <i class="el-icon-arrow-down el-icon--right"></i>-->
            <!--                              </span>-->
            <!--                                <el-dropdown-menu slot="dropdown">-->
            <!--                                    <el-dropdown-item icon="el-icon-plus">黄金糕</el-dropdown-item>-->
            <!--                                    <el-dropdown-item icon="el-icon-circle-plus">狮子头</el-dropdown-item>-->
            <!--                                    <el-dropdown-item icon="el-icon-circle-plus-outline">螺蛳粉</el-dropdown-item>-->
            <!--                                    <el-dropdown-item icon="el-icon-check">双皮奶</el-dropdown-item>-->
            <!--                                    <el-dropdown-item icon="el-icon-circle-check">蚵仔煎</el-dropdown-item>-->
            <!--                                </el-dropdown-menu>-->
            <!--                            </el-dropdown>-->

            <div class="block" style="width: 100%; display: inline-block; ">
              <el-slider v-model="missions.paginator.per_page"
                         :min="missions.paginator.page_sizes[0]"
                         :max="missions.paginator.page_sizes[1]"
                         :step="missions.paginator.page_step"
                         :format-tooltip="() => {return missions.paginator.per_page + '条/页'}"
                         @change="MissionTablePageSizeChange">
              </el-slider>
            </div>
          </el-col>
          <el-col>
            <div class="pagination" style="margin-top: 6px; float: right">
              <el-pagination layout="->, total, prev, pager, next" background small
                             :current-page.sync="missions.paginator.current_page"
                             :page-size="missions.paginator.per_page"
                             :total="missions.paginator.total"
                             @size-change="MissionTablePageSizeChange"
                             @current-change="MissionTableCurrentPageChange">
              </el-pagination>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </section>
</template>

<script>
export default {
  name: "Missions",
  data() {
    return {
      menu_left: {
        open: false,
        direction: 'ltr',
      },
      missions: {
        data: [],
        editing_item: {
          id: null,
          no: null,
          type: null,
          title: null,
          requirement_desc: null,
          rewards_desc: null,
          unlock: null,
          hint: null,
          latest_contribution_id: null,
        },
        filter: {
          type: null,
          keyword: '',
        },
        paginator: {
          current_page: 1,
          page_sizes: [50, 200],
          page_step: 50,
          per_page: 50,
          total: null,
        },
        sorter: {
          column: null,
          order: null,
        },
      },
      mission_types: {
        current_key: '',
        data: [],
      },
    };
  },
  mounted() {
    this.refreshMissionsData();
    this.fetchMissionTypesData();
  },
  computed: {
    tableHeight() {
      return window.innerHeight - 122
    }
  },
  methods: {
      // 获取任务数据
      refreshMissionsData() {
        this.axios.get(API_URL + '/api/missions', {
          params: {
            mission_type: this.missions.filter.type, // 筛选：任务类型
            keyword: this.missions.filter.keyword, // 筛选：任务关键字
            page: this.missions.paginator.current_page, // 选择当前页，默认为 1
            per_page: this.missions.paginator.per_page, // 分页大小，默认 50
            column: this.missions.sorter.column, // 排序列
            order: this.missions.sorter.order // 排序方向
          }
        }).then((res) => {
          this.missions.data = res.data.data;
          this.missions.paginator.current_page = res.data.current_page;
          this.missions.paginator.per_page = res.data.per_page;
          this.missions.paginator.total = res.data.total;
        }).catch((res) => {
          console.log(res);
        });
      },
      // 获取任务类型数据
      fetchMissionTypesData() {
        this.axios.get(API_URL + '/api/mission_types').then((res) => {
          this.mission_types.data = res.data;
        }).catch((res) => {
          console.log(res);
        });
      },
      // 任务表格排序状态发生变更
      MissionsTableSortChange(sorter) {
        this.missions.sorter.column = sorter.prop;
        this.missions.sorter.order = sorter.order;
        this.refreshMissionsData();
      },
      // 任务筛选器：任务类型变更
      MissionsTableFilterTypeChange(mission_type) {
        this.missions.filter.type = mission_type;
        this.refreshMissionsData();
      },
      // 任务筛选器：任务关键字变更
      MissionsTableFilterKeywordChange(keyword) {
        this.refreshMissionsData();
      },
      // 修改分页大小
      MissionTablePageSizeChange(size) {
        this.missions.paginator.per_page = size;
        this.refreshMissionsData();
      },
      // 任务表格翻页
      MissionTableCurrentPageChange(page) {
        this.missions.paginator.current_page = page;
        this.refreshMissionsData();
      },
    },
}
</script>

<style>

</style>